<!-- 没有特殊布局的form表单处理 -->
<template>
    <el-dialog :visible.sync="dialogVisible" class="editDialogClass">
        <el-form :label-position="'right'" label-width="120px">
            <div v-for="(item, index) in forms" :key="index">
                <el-form-item v-if="item.show" :disabled="item.disable" :label="item.title">
                    <el-input v-if="!item.type||item.type=='text'" :disabled="item.disable" v-model="item.value" />
                    <el-color-picker v-if="item.show&&item.type&&item.type=='color'" :disabled="item.disable"
                        v-model="item.value"></el-color-picker>
                </el-form-item>
            </div>
            <el-form-item>
                <el-button @click="dialogVisible=false">取消</el-button>
                <el-button v-if="isEdit" type="primary" @click="submitForm()">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts">
import Vue from 'vue'
import { FormDataUtils, IFormCommonData } from './data/ICommon';

export default Vue.extend({
    props: [],
    data() {
        return {
            forms: new Array<IFormCommonData>(),
            dialogVisible: false,
            isEdit: true
        }
    },
    methods: {
        submitForm() {
            this.dialogVisible = false;
            console.error(this.forms)
            let obj: any = FormDataUtils.getFormObject(this.forms)
            this.$emit("sendUpdate", obj)
        },
        /**
         * 
         * @param data 表单数据
         * @param isEdit  是否是编辑
         * @param selectData select 框数据
         */
        async showForm(data: any, isEdit: boolean) {
            this.forms = data;
            this.isEdit = isEdit
            console.error(data)
            this.dialogVisible = true;
        }
    }
})
</script>